<template>
  <el-popover placement="bottom" width="400" v-model="visible">
    <p style="margin-bottom:5px">{{text}}</p>

    <el-date-picker v-model="originalDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
      v-show=isCopy>
    </el-date-picker>
    <el-date-picker v-model="toDate" align="right" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
      :picker-options="pickerOptions" v-show=isPaste>
    </el-date-picker>
    <div style="text-align: right; margin-top: 20px">
      <el-button size="mini" type="text" @click="cancel">取消</el-button>
      <el-button type="primary" size="mini" @click="Confirm" :loading=isLoading>确定</el-button>
    </div>
    <el-button type="primary" slot="reference">复制</el-button>

  </el-popover>

</template>
<script>
import ajax from '@/lib/ajax'
import { defaults } from 'js-cookie'
export default {
  data() {
    return {
      text: '请选择你要复制的范围',
      isCopy: true, ///显示隐藏时间期间选择器
      isPaste: false, ///显示隐藏时间期间选择器
      isLoading: false, ///按钮的加载状态
      visible: false, ///modal的显示隐藏
      pickerOptions: {
        ///时间期间选择器的快捷按钮
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      originalDate: [], ///复制时间范围的值
      toDate: '', ///粘贴起始时间的值
      copyStart: '', ///复制的开始时间
      copyEnd: '', ///复制的结束时间
      pasteStart: '' ///粘贴的开始时间
    }
  },
  methods: {
    cancel() {
      this.visible = false
    },
    Confirm() {
      if (this.isCopy == true) {
        ///true为复制时间所执行的，false为粘贴时间所点击的时间
        if (this.originalDate == null || this.originalDate[0] == '' || this.originalDate[1] == '') {
          //时间范围为空校验
          this.$message({ message: '请正确选择正确的复制时间范围', type: 'error' })
        } else {
          this.copyStart = this.originalDate[0]
          this.copyEnd = this.originalDate[1]
          
          this.isLoading = true
          setTimeout(() => {
            this.isLoading = false
            this.isCopy = false
            this.isPaste = true
            this.text = '请选择要粘贴的起始时间'
          }, 2000)
        }
      } else {
        if (this.toDate == '' || this.toDate == null) {
          this.$message({ message: '请正确选择正确的粘贴起始时间', type: 'error' })
        } else {
          let that = this
          that.pasteStart = that.toDate
          that.isLoading = true
          console.log(that.copyStart)
          console.log(that.copyEnd)
          ajax
            .post('/api/services/app/EmployeeTaskMapping/PasteArrangeWork', {
              StartCopyDate: that.copyStart,
              EndCopyDate: that.copyEnd,
              PasteDate: that.pasteStart
            })
            .then(function (res) {
              that.isCopy = true
              that.isPaste = false
              that.$emit('fuzhi')
              that.$message.success('复制排班表成功')
              that.$message({ message: '复制排班表成功', type: 'success' })
              that.isLoading = false
              that.visible = false
            })
        }
      }
    }
  },
  
}
</script>